<template>
  <div>
    <a-card :bordered="false" style="margin-bottom:24px;">
      <a-row type="flex">
        <a-form-model v-bind="formItemLayout" @keyup.enter.native="searchQuery">
          <a-col :span="9">
            <a-form-model-item label="回填时间" class="form-model-flex" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
              <!-- <a-range-picker v-model="rangePickerTime" @change="rangePickerChange" valueFormat="YYYY-MM-DD" /> -->
              <a-date-picker
                v-model="queryParam.backfillStartTime"
                placeholder="开始时间"
                :disabled-date="disabledStartDate"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
                @openChange="handleStartOpenChange"
              />
              <span class="line">-</span>
              <a-date-picker
                v-model="queryParam.backfillEndTime"
                placeholder="结束时间"
                :disabled-date="disabledEndDate"
                valueFormat="YYYY-MM-DD HH:mm:ss"
                :show-time="{ defaultValue: moment('23:59:59', 'HH:mm:ss') }"
                :open="endOpen"
                @openChange="handleEndOpenChange"
              />
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item label="受害人手机号">
              <a-input v-model="queryParam.victimPhone" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item label="预警编号">
              <a-input v-model="queryParam.warningNumber" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item label="状态">
              <a-select v-model="queryParam.feedbackStatus" placeholder="请选择">
                <template v-for="item in feedbackStatusData">
                  <a-select-option :key="item.value" :value="item.value" > {{ item.name }}</a-select-option>
                </template>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0;">
              <a-space>
                <a-button type="primary" @click="searchQuery"> 查询 </a-button>
                <a-button @click="searchReset"> 重置 </a-button>
              </a-space>
            </a-form-model-item>
          </a-col>
        </a-form-model>
      </a-row>
    </a-card>
    <div class="main-content">
      <div class="btnBox">
        <a-button type="primary" @click="onBatchDeal">批量处理</a-button>
        <a-button type="primary" @click="onExportDowm"> 导出 </a-button>
      </div>
      <div style="margin-top:10px;">
        <a-table
          ref="table"
          size="default"
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          class="j-table-force-nowrap"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          @change="handleTableChange"
          >
          <template slot="feedbackStatus" slot-scope="text">
            <span v-if="text=='1'">成功</span>
            <span v-else-if="text=='2'" style="color:red;">失败</span>
            <span v-else></span>
           </template>
           <template slot="feedbackSituation" slot-scope="text">
            <span v-if="text=='1'">未电话联系</span>
            <span v-else-if="text=='2'">已电话联系</span>
            <span v-else></span>
           </template>
           <template slot="situationNoPhone" slot-scope="text">
            <span v-if="text=='1'">拒接/未接</span>
            <span v-else-if="text=='2'">空号</span>
            <span v-else-if="text=='6'">不在本辖区致无法联系</span>
            <span v-else></span>
           </template>
           <template slot="situationCalled" slot-scope="text">
            <span v-if="text=='1'">事主未反馈任何信息</span>
            <span v-else-if="text=='2'">事主表述/态度模糊</span>
            <span v-else-if="text=='3'">未接到欺诈信息</span>
            <span v-else-if="text=='4'">接到欺诈信息</span>
            <span v-else></span>
           </template>
           <template slot="feedbackResult" slot-scope="text">
            <span v-if="text=='1'">未被骗</span>
            <span v-else-if="text=='2'">已被骗</span>
            <span v-else-if="text=='0'">未知</span>
            <span v-else></span>
           </template>
           <template slot="cheatedReportStatus" slot-scope="text,record">
            <span v-if="record.feedbackResult=='2' && text=='0'">否</span>
            <span v-else-if="record.feedbackResult=='2' && text">是</span>
            <span v-else></span>
           </template>
           <template slot="feedbackResultExt" slot-scope="text">
            <span v-if="text=='1'">回访</span>
            <span v-else></span>
           </template>
           <template slot="notCheatedStatusConsciousness" slot-scope="text">
            <span v-if="text=='1'">是</span>
            <span v-else-if="text=='0'">否</span>
            <span v-else></span>
           </template>
           <template slot="notCheatedStatusAwake" slot-scope="text">
            <span v-if="text=='1'">是</span>
            <span v-else-if="text=='0'">否</span>
            <span v-else></span>
           </template>
        </a-table>
      </div>
    </div>
    <export-modal ref="modalForm" @ok="modalFormOk"></export-modal>
  </div>
</template>

<script>
  import moment from 'moment'
  import {publicApi,dataBackfillBatchDeal} from '@/api/LogManagement.js'
  import downLoadComponents from '@/components/zxd/downLoad'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import ExportModal from './components/ExportModal.vue'
  const today = function() {
    let time = new Date();
    let year = time.getFullYear()
    let month = time.getMonth() + 1 < 10 ? `0${time.getMonth() + 1}` : time.getMonth() + 1
    let day = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate()
    return `${year}-${month}-${day}`
  }
  export default {
    components: {
      downLoadComponents,
      ExportModal
    },
    mixins:[JeecgListMixin],
    data () {
       return {
        moment,
        formItemLayout: {
          labelCol: { span: 10 },
          wrapperCol: { span: 14 }
        },
        endOpen: false,
        // 表头
        columns: [
          // {
          //   title: '序号',
          //   dataIndex: '',
          //   key: 'rowIndex',
          //   // width: 100,
          //   // align: 'center',
          //   customRender: (text, record, index) =>
          //     `${(this.ipagination.current - 1) * this.ipagination.pageSize +
          //       (index + 1)}` //序号分页后连续
          // },
          {
            title:'预警编号',
            // align:"center",
            dataIndex: 'warningNumber',
          },
          {
            title:'主键编号',
            // align:"center",
            dataIndex: 'id',
          },
          {
            title:'受害人手机号',
            // align:"center",
            dataIndex: 'victimPhone',
          },
          {
            title:'预警时间',
            // align:"center",
            dataIndex: 'warningTime',
          },
          {
            title:'处置方式',
            // align:"center",
            dataIndex: 'disposalMethod',
            customRender: (text) => {
              var str = ""
              if(text){
                var strArr = text.split(",")
                strArr.forEach(item => {
                  if(item == "a")  str+="电话预警,"
                  if(item == "b")  str+="短信预警,"
                  if(item == "c")  str+="上门预警,"
                  if(item == "d")  str+="账号处置,"
                  if(item == "e")  str+="智能语音预警,"
                });
                str = str.substring(0,str.length-1)
              }
              return str
            },
          },
          {
            title:'反馈情况',
            // align:"center",
            dataIndex: 'feedbackSituation',
            scopedSlots: { customRender: 'feedbackSituation' },
          },
          {
            title:'反馈情况备注',
            // align:"center",
            dataIndex: 'feedbackSituationExt',
            customRender: (text) => {
              var str = ""
              if(text){
                var strArr = text.split(",")
                strArr.forEach(item => {
                  if(item == "a")  str+="已发短信预警,"
                  if(item == "b")  str+="已见面劝阻,"
                  if(item == "c")  str+="数据重复推送,"
                });
                str = str.substring(0,str.length-1)
              }
              return str
            },
          },
          {
            title:'未接情况',
            // align:"center",
            dataIndex: 'situationNoPhone',
            scopedSlots: { customRender: 'situationNoPhone' },
          },
          {
            title:'已接情况',
            // align:"center",
            dataIndex: 'situationCalled',
            scopedSlots: { customRender: 'situationCalled' },
          },
          {
            title:'反馈结果',
            // align:"center",
            dataIndex: 'feedbackResult',
            scopedSlots: { customRender: 'feedbackResult' },
          },
          {
            title:'是否报案',
            // align:"center",
            dataIndex: 'cheatedReportStatus',
            scopedSlots: { customRender: 'cheatedReportStatus' },
          },
          {
            title:'被骗金额（元）',
            // align:"center",
            dataIndex: 'cheatedFraudAmount',
          },
          {
            title:'回访',
            // align:"center",
            dataIndex: 'feedbackResultExt',
            scopedSlots: { customRender: 'feedbackResultExt' },
          },
          {
            title:'预警对象具备自我防范意识',
            // align:"center",
            dataIndex: 'notCheatedStatusConsciousness',
            scopedSlots: { customRender: 'notCheatedStatusConsciousness' },
          },
          {
            title:'预警对象经劝阻后醒悟',
            // align:"center",
            dataIndex: 'notCheatedStatusAwake',
            scopedSlots: { customRender: 'notCheatedStatusAwake' },
          },
          {
            title:'劝阻金额（元）',
            // align:"center",
            dataIndex: 'notCheatedStoplossAmount',
          },
          {
            title:'回填时间',
            // align:"center",
            dataIndex: 'backfillTime',
          },
          {
            title:'反馈状态',
            // align:"center",
            dataIndex: 'feedbackStatus',
            scopedSlots: { customRender: 'feedbackStatus' },
          },
          {
            title:'反馈时间',
            // align:"center",
            dataIndex: 'feedbackTime',
          },
        
        ],
        feedbackStatusData:[
          {value:'0',name:'全部'},
          {value:'1', name:'成功'},
          {value:'2', name:'失败'}
        ],
        rangePickerTime:[today(),today()],
        queryParam: {
          feedbackStatus:"0"
        },
        url: {
          list: publicApi.getDataBackfillList,
          exportXlsUrl: publicApi.dataBackfillExportExcel,
        },
        exportDowmData: { idList: [],exportFields:[], dataBackfillQuery: {} },
        fileText: '公安部数据回填日志-导出',
        downUrl: publicApi.dataBackfillExportExcel,
      }
    },
    created(){
      // this.$set(this.queryParam, 'backfillStartTime', today()+' 00:00:00')
      // this.$set(this.queryParam, 'backfillEndTime', today()+' 23:59:59')
    },
    methods: {
      // 自定义时间
      rangePickerChange(date) {
        this.$set(this.queryParam, 'backfillStartTime', date[0])
        this.$set(this.queryParam, 'backfillEndTime', date[1])
        console.log("this.queryParam",this.queryParam);
      },
      searchReset() {
        this.rangePickerTime = [today(),today()],
        this.queryParam = {
          feedbackStatus:"0"
        }
        // this.$set(this.queryParam, 'backfillStartTime', today()+' 00:00:00')
        // this.$set(this.queryParam, 'backfillEndTime', today()+' 23:59:59')
        this.loadData(1);
      },
      onBatchDeal(){
        // var ids = this.selectedRowKeys.join(",")
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning('请选择一条记录！');
          return;
        }
        var that = this
        this.$confirm({
          title: '是否确认批量处理？',
          okText: '确认',
          onOk() {
            var params = {
              ids:that.selectedRowKeys.join(",")
            }
            dataBackfillBatchDeal(params).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.loadData();
                that.onClearSelected();
              } else {
                that.$message.warning(res.message?res.message:'请求失败！')
              }
            }).catch(e=>{
              that.$message.warning("请求失败！");
            }).finally(() => {
            })
          }
        })
        
      },
      getCheckboxProps(record){
        return {
          props: {
            disabled: record.feedbackStatus === '1', 
            name: record.realName,
          },
        }
      },
      
      onExportDowm() {
        this.exportDowmData = {
          idList: this.selectedRowKeys,
          exportFields:['warningNumber','id','victimPhone'],
          dataBackfillQuery: {
            backfillEndTime: this.queryParam.backfillEndTime,
            backfillStartTime: this.queryParam.backfillStartTime,
            feedbackStatus: this.queryParam.feedbackStatus,
            victimPhone: this.queryParam.victimPhone,
            warningNumber:this.queryParam.warningNumber
            // pageNo: this.ipagination.current,
            // pageSize:this.ipagination.pageSize

          }
        }
        this.$refs.modalForm.add(this.exportDowmData);
        this.$refs.modalForm.title = "导出";
        this.$refs.modalForm.disableSubmit = false;

      },
      // 回填时间
      disabledStartDate(startValue) {
        const endValue =
        Object.keys(this.queryParam).length > 0 && this.queryParam.backfillEndTime
          ? this.moment(this.queryParam.backfillEndTime)
          : null //this.endValue
        console.log(startValue, endValue)
        if (!startValue || !endValue) {
          return false
        }
        return startValue.valueOf() > endValue.valueOf()
      },
      // 回填时间
      disabledEndDate(endValue) {
        const startValue =
        Object.keys(this.queryParam).length > 0 && this.queryParam.backfillStartTime
          ? this.moment(this.queryParam.backfillStartTime)
          : null //this.startValue
        if (!endValue || !startValue) {
          return false
        }
        return startValue.valueOf() >= endValue.valueOf()
      },
      handleStartOpenChange(open) {
        console.log(open)
        if (!open) {
          this.endOpen = true
        }
      },
      handleEndOpenChange(open) {
        this.endOpen = open
      }
    }
  }
</script>

<style lang="less" scoped>
.title {
    color: rgba(0,0,0,.85);
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 16px;
  }
  .main-content{
    background: #fff;
    padding: 24px;
  }
  .btnBox {
    // margin-top: 20px;
    display:flex;
    .ant-btn {
      margin-right: 10px;
    }
  }
  .form-model-flex {
  /deep/.ant-form-item-children {
    display: flex;
    align-items: center;
    .ant-calendar-picker {
      min-width: 47% !important;
    }
    .line {
      padding: 0 4px;
    }
  }
}
</style>